<template>
  <header class="header">
    <div class="header-container">
      <!-- Logo -->
      <div class="logo" @click="goToHome">
        <el-icon size="24">
          <el-icon name="book-open" />
        </el-icon>
        <span class="logo-text">课程学习平台</span>
      </div>

      <!-- 导航菜单 -->
      <nav class="nav">
        <el-menu 
          :default-active="activeIndex"
          mode="horizontal" 
          background-color="transparent"
          text-color="#303133"
          active-text-color="#409EFF"
          @select="handleMenuSelect"
          class="nav-menu"
        >
          <el-menu-item index="home">首页</el-menu-item>
          <el-menu-item index="category" v-if="isAuthenticated">课程分类</el-menu-item>
          <el-menu-item index="add-course" v-if="isAuthenticated">添加课程</el-menu-item>
          <el-menu-item index="add-category" v-if="isAuthenticated">添加课程类别</el-menu-item>
          <el-menu-item index="add-subitem" v-if="isAuthenticated">添加任务项</el-menu-item>
        </el-menu>
      </nav>

      <!-- 用户信息/登录按钮 -->
      <div class="user-area">
        <template v-if="isAuthenticated">
          <div class="user-info">
            <span class="username">{{ userInfo.username }}</span>
            <el-button 
              type="text" 
              @click="handleLogout"
              class="logout-btn"
              icon="ep-logout"
            >
              退出
            </el-button>
          </div>
        </template>
        <template v-else>
          <el-button type="text" @click="goToLogin">登录</el-button>
          <el-button type="primary" @click="goToRegister" size="small">注册</el-button>
        </template>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores'
// 图标已在main.js中全局注册

const router = useRouter()
const userStore = useUserStore()

// 计算属性获取用户认证状态和用户信息
const isAuthenticated = computed(() => userStore.isAuthenticated)
const userInfo = computed(() => userStore.userInfo)

// 计算当前激活的菜单项
const activeIndex = computed(() => {
  const path = router.currentRoute.value.path
  if (path === '/') return 'home'
  if (path === '/category') return 'category'
  if (path === '/add-course') return 'add-course'
  if (path === '/add-category') return 'add-category'
  if (path === '/add-subitem') return 'add-subitem'
  return 'home'
})

// 导航到首页
const goToHome = () => {
  router.push('/')
}

// 导航到登录页
const goToLogin = () => {
  router.push('/login')
}

// 导航到注册页
const goToRegister = () => {
  router.push('/register')
}

// 处理菜单选择
const handleMenuSelect = (index) => {
  if (index === 'home') {
    router.push('/')
  } else if (index === 'category') {
    router.push('/category')
  } else if (index === 'add-course') {
    router.push('/add-course')
  } else if (index === 'add-category') {
    router.push('/add-category')
  } else if (index === 'add-subitem') {
    router.push('/add-subitem')
  }
}

// 处理退出登录
const handleLogout = async () => {
  await userStore.logout()
  router.push('/login')
}

// 组件挂载时加载用户信息
onMounted(() => {
  userStore.loadUserInfo()
})
</script>

<style scoped>
.header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #409EFF;
}

.logo-text {
  margin-left: 8px;
  font-size: 20px;
  font-weight: bold;
}

.nav {
  flex: 1;
  margin-left: 40px;
}

.nav-menu {
  border-bottom: none;
}

.user-area {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
}

.username {
  margin-right: 16px;
  color: #303133;
}

.logout-btn {
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 10px;
  }
  
  .logo-text {
    font-size: 16px;
  }
  
  .nav {
    margin-left: 20px;
  }
  
  .nav-menu {
    font-size: 14px;
  }
}
</style>